<script setup>
import { ref } from "vue";
import RecursiveNav from "@/components/TopNav/RecursiveNav.vue";

const menuData = ref([
  {
    index: "1",
    text: "首页",
    disabled: false,
  },
  {
    index: "2",
    text: "通关服务",
    disabled: false,
    children: [
      {
        index: "2-1",
        text: "关务市场",
        disabled: false,
      },
      {
        index: "2-2",
        text: "智能辅助申报",
        disabled: false,
      },
      {
        index: "2-3",
        text: "通关申报服务",
        disabled: false,
      },
    ],
  },
  {
    index: "3",
    text: "市场信息",
    disabled: false,
    children: [
      {
        index: "3-1",
        text: "云展会",
        disabled: false,
      },
      {
        index: "3-2",
        text: "全球贸易信息",
        disabled: false,
      },
      {
        index: "3-3",
        text: "RCEP智能税则",
        disabled: false,
      },
    ],
  },
  {
    index: "4",
    text: "仓储物流",
    disabled: false,
    children: [
      {
        index: "4-1",
        text: "物流市场",
        disabled: false,
      },
      {
        index: "4-2",
        text: "仓储市场",
        disabled: false,
      },
      {
        index: "4-3",
        text: "可视化供应链",
        disabled: false,
      },
    ],
  },
  {
    index: "5",
    text: "金融服务",
    disabled: false,
    children: [
      {
        index: "5-1",
        text: "国际贸易金融服务",
        disabled: false,
      },
    ],
  },
]);

const activeIndex = ref("1");
const handleSelect = (key, keyPath) => {
  console.log(key, keyPath);
};
</script>

<template>
  <div style="width: 100%">
    <div style="width: 1200px; margin: 0 auto; display: flex">
      <div style="display: flex; align-items: center; margin-right: 50px">
        <img
          src="../TopNav/assets/logo.svg"
          style="width: 28px; height: 28px"
        />
        <div style="color: #333; font-weight: bolder; font-size: 18px">
          湖北国际贸易数字化平台
        </div>
      </div>
      <!--菜单栏-->
      <div style="flex: 1">
        <el-menu
          :default-active="activeIndex"
          class="el-menu-demo"
          mode="horizontal"
          @select="handleSelect"
        >
          <recursive-nav :menu-data="menuData"></recursive-nav>
        </el-menu>
      </div>
    </div>
  </div>
</template>

<style scoped></style>
